import React from 'react'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from 'react-router-dom'
import { ThemeProvider } from './contexts/ThemeContext'
import { SidebarProvider } from './contexts/SidebarContext'
import Layout from './Layout'
import HomePage from './pages/HomePage'
import ArticlesPage from './pages/ArticlesPage'
import AboutPage from './pages/AboutPage'
import ContactPage from './pages/ContactPage'
import CategoryPage from './pages/CategoryPage'
import UserProfile from './components/UserProfile'
import PublishPage from './pages/PublishPage'
import ArticleDetailPage from './pages/ArticleDetailPage'
import PictureBed from './pages/subpages/pictureBed'
import DictPage from './pages/DictPage'
import { ToastContainer } from './components/Toast'
import 'remixicon/fonts/remixicon.css'
import './index.css'
import 'antd/dist/reset.css'

function App() {
  return (
    <ThemeProvider>
      <SidebarProvider>
        <Router basename="/">
          <Layout>
            <Routes>
              <Route path="/" element={<Navigate to="/home" />} />
              <Route path="/home" element={<HomePage />} />
              <Route path="/articles" element={<ArticlesPage />} />
              <Route path="/about" element={<AboutPage />} />
              <Route path="/contact" element={<ContactPage />} />
              <Route path="/category/:category" element={<CategoryPage />} />
              <Route path="/profile" element={<UserProfile />} />
              <Route path="/publish" element={<PublishPage />} />
              <Route path="/article/:id" element={<ArticleDetailPage />} />
              <Route path="/picturebed" element={<PictureBed />} />
              <Route path="/dict" element={<DictPage />} />
            </Routes>
          </Layout>
        </Router>
        <ToastContainer />
      </SidebarProvider>
    </ThemeProvider>
  )
}

export default App